<template>
    <div>
<el-card>


      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="供应商编码" prop="supplierCode">
          <el-input
            v-model="queryParams.supplierCode"
            placeholder="请输入供应商编码"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input
            v-model="queryParams.supplierName"
            placeholder="请输入供应商名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="供应商类型" prop="supplierType">
          <el-select v-model="queryParams.supplierType" placeholder="请选择供应商类型" clearable size="small">
            <el-option label="自营" value="1" />
            <el-option label="平台" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="店铺类型" prop="supplierTypeform">
          <el-select v-model="queryParams.supplierTypeform" clearable placeholder="请选择">
            <el-option
              @keyup.enter.native="handleQuery"
              v-for="item in options"
              :key="item.valuesu"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="供应商联系人" prop="linkMan">
          <el-input
            v-model="queryParams.linkMan"
            placeholder="请输入供应商联系人"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>


        <el-form-item label="状态" prop="supplierStatus">
          <el-select v-model="queryParams.supplierStatus" placeholder="请选择状态" clearable size="small">
            <el-option label="启用" value="0" />
            <el-option label="禁用" value="1" />
          </el-select>
        </el-form-item>

        <el-form-item label="店铺名称" prop="shopsName">
          <el-input
            v-model="queryParams.shopsName"
            placeholder="请输入店铺名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">


        <el-col :span="1.5">
          <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table border v-loading="loading" style="width: 100%" :data="infoList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <!--<el-table-column label="供应商ID" fixed align="center" prop="supplierId" />-->
        <el-table-column label="供应商编码" fixed width="100" align="center" prop="supplierCode" />
        <el-table-column label="店铺名称" width="160" align="center" >
          <template slot-scope="scope">
            <router-link :to="'/goodsstore/type/supergoods/' + scope.row.supplierId" class="link-type">
              <span>{{ scope.row.shopsName }}</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column label="企业logo" width="200" align="center" prop="supplierPic" >
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.supplierPic">
            </el-image>
          </template>
        </el-table-column>
<!--        <el-table-column label="供应商名称" width="100" align="center" prop="supplierName" />-->
<!--        <el-table-column label="供应商类型" width="100" align="center" prop="supplierType" >-->
<!--          <template slot-scope="scope">-->
<!--            <el-tag-->
<!--              :type="scope.row.supplierType === 1 ? 'primary' : 'success'"-->
<!--              disable-transitions>{{scope.row.supplierType ===1 ? '自营' : '平台'}}</el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->

        <el-table-column label="店铺类型" align="center" prop="supplierTypeform" >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.supplierTypeform === 1 ? 'warning' : 'info'"
              disable-transitions>{{scope.row.supplierTypeform ===1 ? '物品' : '技术'}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="供应商联系人" width="100" align="center" prop="linkMan" />
        <el-table-column label="联系电话" width="120" align="center" prop="phoneNumber" />
        <el-table-column label="供应商地址" width="200" align="center" prop="address" />
        <!--<el-table-column label="状态" align="center" width="200" prop="supplierStatus" />-->
        <el-table-column label="状态" align="center" width="200" >
          <template slot-scope="scope">
            <el-switch v-model="scope.row.supplierStatus"  active-text="启用" inactive-text="禁用" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="最后修改时间" width="150" align="center" prop="modifiedTime" >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="营业执照" width="200" align="center" prop="licenseUrl" >
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.licenseUrl"
              @click="getBigLicenseUrl(scope.row)"
              :preview-src-list="srcList">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="资质证书" width="200" align="center" prop="certificate" >
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.certificate"
              @click="getBigLicenseUrl(scope.row)">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="资质证书简介" width="120" align="center" prop="certificateText" :show-overflow-tooltip="true"/>
        <el-table-column label="业务简介" width="120" align="center" prop="supplierTypeText" :show-overflow-tooltip="true"/>
        <el-table-column label="保证金" width="120" align="center" prop="balanceMoney" :show-overflow-tooltip="true"/>

        <!--<el-table-column label="用户ID" align="center" prop="customerId" />-->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDeletebaozheng(scope.row)"
            >添加/修改保证金</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

  <el-dialog
    title="营业执照"
    :visible.sync="dialogLicense"
    width="50%"
    :before-close="handleClose">
    <el-image
      style="width: 100%; height: 100%"
      :src="dialogLicenseUrl"
      :preview-src-list="dialogLicenseUrlList">
    </el-image>
    <span slot="footer" class="dialog-footer">
          <el-button @click="dialogLicense = false">取 消</el-button>
          <el-button type="primary" @click="dialogLicense = false">确 定</el-button>
        </span>
  </el-dialog>

</el-card>


      <el-dialog :title="titlebzj" :visible.sync="openbzj"  width="500px" append-to-body >
        <el-form ref="form" :model="formbzj" label-width="80px">
          <el-form-item label="保证金余额" prop="balanceMoney">
            <el-input v-model="formbzj.balanceMoney" placeholder="请输入保证金余额" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFormbzj">确 定</el-button>
          <el-button @click="cancelbzj">取 消</el-button>
        </div>
      </el-dialog>

    </div>
</template>

<script>
  import { superSupplistInfo, superSuppgetInfo, superSuppexportInfo, changeStatus } from "@/api/super/goodsstore";
  import { listInfosi, getInfosi, delInfosi, addInfosi, updateInfosi, typeStatus,findAllList,addAccount } from "@/api/shopping/goods";

  export default {
        name: "goodsstore",
    data() {
      return {
        titlebzj: "",
        formbzj:{
          supplierIdNum:'',
        },
        openbzj: false,

        options: [{
          value: '1',
          label: '物品'
        }, {
          value: '2',
          label: '技术'
        }],
        valuesu: '',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 供应商信息表格数据
        infoList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          supplierCode: null,
          supplierName: null,
          supplierType: null,
          supplierTypeform: null,
          linkMan: null,
          phoneNumber: null,
          bankName: null,
          bankAccount: null,
          address: null,
          supplierStatus: null,
          modifiedTime: null,
          shopsName: null,
          customerId: null
        },
        // 表单参数
        form: {},
        srcList:[],
        dialogLicense:false,
        dialogLicenseUrl:null,
        dialogLicenseUrlList:[],
      };
    },
    created() {
      this.getList();
    },
    methods: {
      handleDeletebaozheng(row){
        this.openbzj = true;
        this.titlebzj = "保证金"
        this.formbzj.supplierIdNum = row.supplierId;
        console.log("this.formbzj.supplierIdNum***********"+this.formbzj.supplierIdNum)
      },
      cancelbzj(){
        this.openbzj = false;
      },

      /** 提交按钮 */
      // submitForm() {
      //   this.$refs["form"].validate(valid => {
      //     if (valid) {
      //       if (this.form.accountId != null) {
      //         updateAccount(this.form).then(response => {
      //           if (response.code === 200) {
      //             this.msgSuccess("修改成功");
      //             this.open = false;
      //             this.getList();
      //           }
      //         });
      //       } else {
      //         addAccount(this.form).then(response => {
      //           if (response.code === 200) {
      //             this.msgSuccess("新增成功");
      //             this.open = false;
      //             this.getList();
      //           }
      //         });
      //       }
      //     }
      //   });
      // },
      submitFormbzj(){
        // this.$refs["formbzj"].validate(valid=>{
        //   if (valid){
        addAccount(this.formbzj).then(response => {
          if (response.code === 200) {
            this.msgSuccess("操作成功");
            this.openbzj = false;
            this.getList();
          }
        });
        // }
        // })
      },

      handleStatusChange(row){
        let text = row.supplierStatus === "0" ? "启用" : "禁用";
        this.$confirm(
          '确认要"' + text + '""' + row.shopsName + '"店铺吗?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(function () {
            return changeStatus(row.supplierId, row.supplierStatus,row.customerId);
          })
          .then(() => {
          this.msgSuccess(text + "成功");
      })
      .catch(function () {
          row.supplierStatus = row.supplierStatus === "0" ? "1" : "0";
        });
      },
      /** 查询供应商信息列表 */
      getList() {
        this.loading = true;
        superSupplistInfo(this.queryParams).then(response => {
          this.infoList = response.rows;
          this.total = response.total;
          this.loading = false;
      });
      },

      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },

      // 表单重置
      reset() {
        this.form = {
          supplierId: null,
          supplierCode: null,
          supplierName: null,
          supplierType: null,
          supplierTypeform: null,
          linkMan: null,
          phoneNumber: null,
          bankName: null,
          bankAccount: null,
          address: null,
          supplierStatus: 0,
          modifiedTime: null,
          shopsName: null,
          customerId: null
        };
        this.resetForm("form");
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.supplierId)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },

      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有供应商信息数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return superSuppexportInfo(queryParams);
        }).then(response => {
          this.download(response.msg);
      }).catch(function() {});
      },
      // 查看营业执照大图
      getBigLicenseUrl(row){
        this.dialogLicense = true;
        this.dialogLicenseUrl = row.licenseUrl;
        this.dialogLicenseUrlList.push(row.licenseUrl);
      }
    }
  }
</script>

<style scoped>

</style>
